<template>
  <div class="card" :class="borderCss">
    <div class="icon"></div>
    <div class="close" @click="remove"><i class="el-icon-close"></i></div>
    <div class="name" :title="item.fileName">{{ item.fileName }}</div>
    <div v-if="isSuccess">
      <el-button size="small" type="text" v-if="isExport" @click="download">下载</el-button>
      <el-button size="small" type="text" v-if="isPdf && isPreview" @click="preview">预览</el-button>
    </div>
  </div>
</template>

<script>
import { Message, MessageBox } from 'element-ui'
import { docRemove } from '@/api'
import { getLinkUrl } from '@/utils/helpers'

export default {
  props: {
    item: {
      type: Object,
      default: () => ({})
    }
  },

  computed: {
    isPdf() {
      return this.item.fileType?.toLowerCase() === 'pdf'
    },
    isExport() {
      return this.item.triggerMode?.toLowerCase() === 'export'
    },
    isPreview() {
      return this.item.triggerMode?.toLowerCase() === 'preview'
    },
    isSuccess() {
      return this.item.taskStatus === 3
    },
    borderCss() {
      switch (this.item.taskStatus) {
        case 3:
          return 'success'
        case 4:
          return 'error'
        default:
          return 'normal'
      }
    }
  },

  methods: {
    download() {
      const url = window.location.origin + '/prod-api/editor/file/downloadByAttachment/' + this.item.filePath
      window.location.href = url
    },
    async remove() {
      try {
        await MessageBox.confirm(`是否删除文件?`, '提示', {
          confirmButtonText: '删除',
          cancelButtonText: '取消',
          distinguishCancelAndClose: true,
          type: 'warning'
        })
        await docRemove(this.item.taskNo)
        Message.success('删除成功')
        this.$emit('removed')
      } catch (error) {
        console.log(error)
      }
    },
    preview() {
      const open = window.open()
      open.location = getLinkUrl(this.item.filePath)
    }
  }
}
</script>

<style scoped>
.card {
  border-radius: 10px;
  margin: 10px 0;
  margin-left: 15px;
  font-size: 14px;
  padding: 0 5px;
  display: flex;
  align-items: center;
  position: relative;
  min-height: 40px;
}
.name {
  width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 5px;
}
.close {
  position: absolute;
  cursor: pointer;
  right: 9px;
  top: 8px;
}
.close .el-icon-close {
  font-size: 10px;
}
.icon {
  width: 20px;
  height: 20px;
  position: absolute;
  left: -25px;
}
.success {
  border: 2px solid #67c23a;
}
.error {
  border: 2px solid #f56c6c;
}
.normal {
  border: 2px solid #025da4;
}
.success .icon {
  background-image: url('./svg/dl-success.svg');
}

.error .icon {
  background-image: url('./svg/dl-error.svg');
}
.normal .icon {
  background-image: url('./svg/dl-normal.svg');
}

::v-deep .el-button--primary {
  color: #fff;
  background-color: #025da4;
  border-color: #025da4;
}
::v-deep button.el-button--text {
  font-size: 12px;
  border-color: transparent;
  color: #409eff;
  background: 0 0;
  padding-left: 0;
  padding-right: 0;
}
</style>
